<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-list>
					<view
						class="item"
						v-for="item in list"
						:key="item.title"
					>
						<pure-image
							class="item__image"
							:src="item.image"
							height="260rpx"
							width="100%"
							mode="aspectFill"
						></pure-image>
						<view class="item__title">{{ item.title }}</view>
					</view>
				</pure-list>
			</pj-demo>

			<!-- 空状态 -->
			<pj-demo title="空状态">
				<pure-list status="empty">
					<view
						class="item"
						v-for="item in list"
						:key="item.title"
					>
						<pure-image
							class="item__image"
							:src="item.image"
							height="260rpx"
							width="100%"
							mode="aspectFill"
						></pure-image>
						<view class="item__title">{{ item.title }}</view>
					</view>
					<template #empty-footer>
						<pure-flex>
							<pure-link
								text="回到主页"
								theme="danger"
							></pure-link>
							<pure-link
								text="继续逛逛"
								theme="primary"
							></pure-link>
						</pure-flex>
					</template>
				</pure-list>
			</pj-demo>

			<!-- 加载更多 -->
			<pj-demo title="加载更多">
				<pure-list status="more">
					<view
						class="item"
						v-for="item in list.slice(0, 4)"
						:key="item.title"
					>
						<pure-image
							class="item__image"
							:src="item.image"
							height="260rpx"
							width="100%"
							mode="aspectFill"
						></pure-image>
						<view class="item__title">{{ item.title }}</view>
					</view>
				</pure-list>
			</pj-demo>

			<!-- 加载中 -->
			<pj-demo title="加载中">
				<pure-list status="loading">
					<view
						class="item"
						v-for="item in list.slice(4, 8)"
						:key="item.title"
					>
						<pure-image
							class="item__image"
							:src="item.image"
							height="260rpx"
							width="100%"
							mode="aspectFill"
						></pure-image>
						<view class="item__title">{{ item.title }}</view>
					</view>
				</pure-list>
			</pj-demo>

			<!-- 加载全部 -->
			<pj-demo title="加载全部">
				<pure-list status="nomore">
					<view
						class="item"
						v-for="item in list"
						:key="item.title"
					>
						<pure-image
							class="item__image"
							:src="item.image"
							height="260rpx"
							width="100%"
							mode="aspectFill"
						></pure-image>
						<view class="item__title">{{ item.title }}</view>
					</view>
				</pure-list>
			</pj-demo>

			<!-- 加载失败 -->
			<pj-demo title="加载失败">
				<pure-list status="fail">
					<view
						class="item"
						v-for="item in list"
						:key="item.title"
					>
						<pure-image
							class="item__image"
							:src="item.image"
							height="260rpx"
							width="100%"
							mode="aspectFill"
						></pure-image>
						<view class="item__title">{{ item.title }}</view>
					</view>
				</pure-list>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

<style lang="scss" scoped>
	.page {
		.item {
			background: var(--pure-background-default);
			border-radius: var(--pure-radius-default);
			overflow: hidden;
			font-size: var(--pure-font-size-default);

			&__title {
				padding: 16px 16px;
			}
		}
	}
</style>
